import React from 'react';
import type {StyleProp, ViewStyle, ImageURISource} from 'react-native';
import {StyleSheet, View, ActivityIndicator, Image} from 'react-native';
import FadeImage from 'react-native-cdy-baseui/components/FadeImage';
interface Props {
  style?: StyleProp<ViewStyle>;
  url?: string;
  showIndex?: boolean;
}

export const SBImageItem: React.FC<Props> = ({style, url}) => {
  const source = React.useRef<ImageURISource>({
    uri: url,
  }).current;

  return (
    <View style={[styles.container, style]}>
      <ActivityIndicator size="small" />
      <FadeImage key={url} style={styles.image} source={source} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
    borderRadius: 20,
    overflow: 'hidden',
  },
  image: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
});
